<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {Ntf} from "@/api/type";
import {getList} from "@/api";


const ntfList = ref<Ntf[]>([])
const getData = ()=>{
  getList().then((res) => {
    if (!res||!res.lists||res.lists.length===0){
      return
    }
    ntfList.value = res.lists as Ntf[]
  })
  setTimeout(getData, 1000*60)
}
const baseUrl = ""
onMounted(async () => {
  //每10秒获取一次数据
  getData();

});
const toFixed = (num: number) => {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
</script>

<template>
  <div class="overflow-x-hidden lg:h-screen font-body text-jacarta-500 dark:bg-jacarta-900" itemscope
       itemtype="http://schema.org/WebPage">
    <main>
      <!-- Rankings -->
      <section class="h-screen relative">
        <div class="">
          <!-- Table -->
          <div class="scrollbar-custom overflow-x-auto">
            <div
                role="table"
                class="w-full h-screen min-w-[736px] border border-jacarta-100  lg:text-xl  dark:border-jacarta-600 dark:text-white lg:rounded-2lg"
            >
              <div class="flex rounded-t-2lg bg-jacarta-50 dark:bg-jacarta-600" role="row">
                <div class="w-[30%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100"
                  >Collection</span
                  >
                </div>
                <div class="w-[14%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100"
                  >Volume</span
                  >
                </div>
                <div class="w-[14%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100">24h %</span>
                </div>
                <div class="w-[14%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100"
                  >Floor Price</span
                  >
                </div>
                <div class="w-[14%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100"
                  >Owners</span
                  >
                </div>
                <div class="w-[14%] py-3 px-2" role="columnheader">
                  <span class="w-full overflow-hidden text-ellipsis text-jacarta-700 dark:text-jacarta-100">Items</span>
                </div>
              </div>
              <div class="flex font-semibold transition-shadow hover:shadow-lg" role="row" v-for="(item,index) in ntfList" :key="index">
                <div
                    class="flex w-[30%] items-center border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span class="mr-2 lg:mr-4">{{index+1}}</span>
                  <figure class="relative mr-2 w-8 shrink-0 self-start lg:mr-5 lg:w-12">
                    <img :src="baseUrl+item.pic" alt="avatar 1" class="rounded-2lg w-[3rem] h-[3rem] object-cover" loading="lazy" />
                    <div
                        class="absolute -right-2 -bottom-1 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-green dark:border-jacarta-600"
                        data-tippy-content="Verified Collection"
                    >
                      <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          width="24"
                          height="24"
                          class="h-[.875rem] w-[.875rem] fill-white"
                      >
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path>
                      </svg>
                    </div>
                  </figure>
                  <span class="font-display  font-semibold text-jacarta-700 dark:text-white">
                    {{item.name}}
                  </span>
                </div>
                <div
                    class="flex w-[14%] items-center whitespace-nowrap border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span class="-ml-1" data-tippy-content="ETH">
                    <svg
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        x="0"
                        y="0"
                        viewBox="0 0 1920 1920"
                        xml:space="preserve"
                        class="mr-1 h-4 w-4"
                    >
                      <path fill="#8A92B2" d="M959.8 80.7L420.1 976.3 959.8 731z"></path>
                      <path fill="#62688F" d="M959.8 731L420.1 976.3l539.7 319.1zm539.8 245.3L959.8 80.7V731z"></path>
                      <path fill="#454A75" d="M959.8 1295.4l539.8-319.1L959.8 731z"></path>
                      <path fill="#8A92B2" d="M420.1 1078.7l539.7 760.6v-441.7z"></path>
                      <path fill="#62688F" d="M959.8 1397.6v441.7l540.1-760.6z"></path>
                    </svg>
                  </span>
                  <span class=" font-medium tracking-tight">{{toFixed(item.volume)}}</span>
                </div>
                <div
                    class="flex w-[14%] items-center border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span :class="{'text-red':(item.v_24h)<0,'text-green':(item.v_24h)>0}">{{toFixed(item.v_24h)}}%</span>
                </div>
                <div
                    class="flex w-[14%] items-center border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span class="-ml-1" data-tippy-content="ETH">
                    <svg
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        x="0"
                        y="0"
                        viewBox="0 0 1920 1920"
                        xml:space="preserve"
                        class="mr-1 h-4 w-4"
                    >
                      <path fill="#8A92B2" d="M959.8 80.7L420.1 976.3 959.8 731z"></path>
                      <path fill="#62688F" d="M959.8 731L420.1 976.3l539.7 319.1zm539.8 245.3L959.8 80.7V731z"></path>
                      <path fill="#454A75" d="M959.8 1295.4l539.8-319.1L959.8 731z"></path>
                      <path fill="#8A92B2" d="M420.1 1078.7l539.7 760.6v-441.7z"></path>
                      <path fill="#62688F" d="M959.8 1397.6v441.7l540.1-760.6z"></path>
                    </svg>
                  </span>
                  <span class=" font-medium tracking-tight">{{toFixed(item.floor)}}</span>
                </div>
                <div
                    class="flex w-[14%] items-center border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span>{{item.owner}}K</span>
                </div>
                <div
                    class="flex w-[14%] items-center border-t border-jacarta-100 py-4 px-2 dark:border-jacarta-600"
                    role="cell"
                >
                  <span>{{item.items}}K</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- end rankings -->
    </main>
  </div>

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
